<template>

  <m-table
      ref="table"
      :data="results"
      :view="view"
      :buttons="buttons"
      :loading="loading"
      :columns="columns"
  >
    <!--  Cell  -->
    <template #cell="{field, row, prop}">
      {{ row[prop] || '--' }}
    </template>
    <!--  Popover  -->
    <template #pop-index="{row}">
      <el-text size="small">{{ row.id }}</el-text>
    </template>
    <template #pop-cell="{data, prop}">
      <el-text size="small">{{ data[prop] }}</el-text>
    </template>
    <template #pop-meta="{view}">
      <el-tag hit effect="plain">{{ view.code }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-button
          size="small" type="info" plain
          @click="table.closePopover()"
      >close
      </el-button>
    </template>
    <template #pop-search="{field}">
      search = {{ field.prop }}
    </template>
    <template #pop-field="{field}">
      field = {{ field.prop }}
    </template>
    <!--  Outer  -->
    <template #header>
      header
    </template>
    <template #header-tool>
      <el-button @click="reload" size="small" type="primary">reload</el-button>
    </template>
    <template #footer>
      footer
    </template>
    <template #footer-tool>
      footer-tool
    </template>
  </m-table>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref} from "vue";
import {useMorghulisDao} from "../../morghulis/tools/dao_morghulis.ts";
import type {QueryBean} from "../../morghulis/tools/query.ts";
import type {Meta} from "../../morghulis/types/tool/meta.types.ts";
import type {MTableButton, MTableColumn} from "../../morghulis/types/table/m.table.types.ts";
import Something from "@/compo/Something.vue";
import type {DataItem} from "../../morghulis/types/tool/dao.types.ts";

const table = ref()
const includes = ref({name: null})
const queryBean = reactive<QueryBean>({size: 10, page: 1, includes: includes.value})
const meta = reactive<Meta>({db: 'orm', entity: 'data.MetaField', code: 'rest'})

const buttons: MTableButton[] = [
  {
    title: 'abc', handler: (row) => {
      console.log(row)
    }
  },
]
const columns: MTableColumn[] = [
  {label: '自定义列', component: Something},
]

const {
  results, view, loading, load
} = useMorghulisDao(meta, queryBean)


function reload() {
  const selection = table.value?.getSelection() || []
  const ids = selection.map((row: DataItem) => row.id)
  load((array) => {
    nextTick(() => {
      table.value?.setSelection(ids)
    })
  })

}

</script>
